<template>
  <div v-if="visible" class="cont" @click="close">
      <div class="main">
        <div class="title">套餐详情</div>
          <img class="tou-img" src="@/assets/img/vip/tou.png" alt="">
          <div class="text-p">
              {{orderDetail}}
          </div>
      </div>
  </div>
</template>
<script>
export default {
    computed: {
      orderDetail () {
        return this.$store.state.vip.orderDetail
      }
    },
    data () {
      return {
          visible: false
      }
    },
   
    methods: {
      close () {
          this.visible = false
      },
      open () {
          this.visible = true
      }
    }
}
</script>
<style scoped>
.cont{
  position: fixed; top: 0; bottom: 0; right: 0; left: 0; background: rgba(0,0,0,0.5); z-index: 100;
}
.main{
  margin: 5% auto 0 auto; background: #fff;border-radius: 0.15rem;
   width: 6.68rem; height: 90%;  position: relative;
}
.title{
  position: absolute; top: 0; left: 0; width: 100%; text-align: center;
  font-size: 0.32rem; color: #fff; padding: 0.13rem 0;
}
.tou-img{
  max-width: 100%;
}
.text-p{
  padding:0 0.36rem; color: #1B1F27; font-size: 0.28rem;
  overflow: scroll; height: calc(100% - 0.83rem);

    white-space: pre-wrap;

    line-height: 0.5rem;
}
</style>
